<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户转移日志</title>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
		</style>
		
		<style type="text/css">
			<style>
			  .el-header, .el-footer {
				background-color: #E9EEF3;
				color: #333;
				text-align: center;
				line-height: 60px;
			  }
			  
			  .el-aside {
				background-color: #E9EEF3;
				color: #333;
				text-align: center;
				line-height: 30px;
			  }
			  .el-main {
				background-color: #E9EEF3;
				color: #333;
				text-align: center;
				line-height:30px;
			  }
			  
			  body > .el-container {
				margin-bottom: 40px;
			  }
			  
			  .el-container:nth-child(5) .el-aside,
			  .el-container:nth-child(6) .el-aside {
				line-height: 260px;
			  }
			  
			  .el-container:nth-child(7) .el-aside {
				line-height: 320px;
			  }
			  table tr td th{
				  border:1px solid #999999;
			  }
		</style>
	</head>
	<body>
		<div id="app">
			<h3><i class="el-icon-tickets">50天内客户转移日志</i></h3>
			
			<el-container>
			  <el-aside width="280px">
					<el-table :data="tableData">
					  <el-table-column prop="oper" label="操作人" align="center"></el-table-column>
					  <el-table-column prop="operone" label="操作1" align="center"></el-table-column>
					  <el-table-column prop="opertwo" label="操作2" align="center"></el-table-column>
					</el-table>
				  
			</el-aside>
			  <el-main>
				  <template>
				  	<el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
				  	<el-table-column type="selection" width="55" align="center"></el-table-column>
				  	<el-table-column prop="ID" label="ID" width="100" align="center"></el-table-column>
				  	<el-table-column prop="tranid" label="原所有者" show-overflow-tooltip align="center"></el-table-column>
				  	<el-table-column prop="recipient" label="新所有者" align="center"></el-table-column>
				  	<el-table-column prop="opercustomer" label="操作的客户" align="center"></el-table-column>
				  	<el-table-column prop="optime" label="操作时间" align="center"></el-table-column>
				  	</el-table>
				  	<!-- <div style="margin-top: 20px">
				  	<el-button @click="toggleSelection()">取消选择</el-button>
				  	</div> -->
				  </template>
				  <br/>
				  <!-- 分页  float: left; margin-left: 400px;-->
			<div style="display: block;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
				 :page-sizes="[1, 2, 4, 6]" :page-size="${page.pageSize}"  layout="total,prev, pager, next, jumper" :total="${page.total}">
				</el-pagination>
			</div>
			  </el-main>
			</el-container>
			
		</div>
		
		<script type="text/javascript">
		var orderlist=${list};//全部转移日志
		var pagejson=${pagejson};//转移日志分页
				var Main = {
					data() {
						return {
						activeIndex: '1',
						activeIndex2: '1',
						currentPage4:pagejson.pageNum,
						
						tableData: [{
							oper: 'rose',
							operone: '转出',
							opertwo: '转入'
						  }, {
							oper: 'mike',
							operone: '转出',
							opertwo: '转入'
						  }, {
							oper: 'joe',
							operone: '转出',
							opertwo: '转入'
						  },{
							oper: 'susan',
							operone: '转出',
							opertwo: '转入'
						  },{
							oper: 'lisa',
							operone: '转出',
							opertwo: '转入'
						  }],
						
						tableData3:orderlist,
						multipleSelection: []
						};
					},
					methods: {
						handleClick(row) {
							console.log(row);
						},
						handleSelectionChange(val) {
							this.multipleSelection = val;
						},
						handleSizeChange(val) {
							showAtRight('/customer/tranferLog?pageSize='+val);
						
						},
						handleCurrentChange(val) {
							showAtRight('/customer/tranferLog?pageNum='+val);
						},
						handleSelect(key, keyPath) {
						console.log(key, keyPath);
						if (key == 1) {

						}
						},
						
						/* toggleSelection(rows) {
						if (rows) {
							rows.forEach(row => {
							this.$refs.multipleTable.toggleRowSelection(row);
							});
						} else {
							this.$refs.multipleTable.clearSelection();
						}
						}, */
						handleSelectionChange(val) {
						this.multipleSelection = val;
						}
						
					}
					}
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app')
			</script>
	</body>
</html>
